<template>
    <div id="#dvCom">
        <div id="F">
			<p class="table" :style="uid===select.key?'color:#fff;background:#7e591b':''">{{rest.tatel}}<span ></span></p>
			<transition>
				<ul id="ul">
					<li :style="uid===select.key && kss===select.index?'background: #b9a17a;color: #4c371a;':false" v-for="(tiem,kss) in rest.table" @click="tabGames(tiem.src,kss)" :class="">
					<p>{{tiem.tatel}}<i></i></p>
						<!-- 选中图标 -->
						<!-- <span v-show="uid===select.key&&k===select.index"></span> -->
						<span :class="{'spanShow':uid===select.key&&kss===select.index}"></span>
					</li>
				</ul>			
			</transition> 

		</div>

    </div>
</template>
<script>
export default {
    name:"dv",
    props: ['rest', "uid", "select"],
    data: function () {
        return {
            table: false
        };
    },
    methods: {
        tabGames: function (src, x) {
            var uid = { key: this.uid, index: x, src: src };
            this.$emit("tab", uid);
        }
    },
    created: function () {
        if (this.uid == 0) {
            this.table = true;
        }
    }
}
</script>
 <style scoped>
 *{
     margin: 0;
     padding: 0;

 }
#F{
	width: 118px;
	border-top: 1px solid #877352;
	border-bottom:1px solid #372312;
}
.ludanbox{ -webkit-box-flex:1; -ms-flex:1; flex:1;background:url(../img/ludanbobg1.jpg) no-repeat;background-size: 100% 100%;width:100%;height:100%;background-size: 100% 100%}
.table{
	width: 107px;
	height: 44px;
	background: #5c4e37;
	padding-left: 11px;
	line-height: 44px;
	color: #e5d8bd;
	font-size: 18px;
	font-weight: 550;
	cursor: pointer;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-transition: all 0.3s;
	-o-transition: all 0.3s;
	transition: all 0.3s;
}
.table span{
	display: block;
	height: 44px;
	width: 13px;
	margin-left: 13px;
	background: url(../img/index.png) no-repeat -172px -20px;
}
#ul li{
	width: 107px;
	height: 44px;
	background: #746245;
	color: #c6b08d;
	padding-left: 11px;
	font-weight: 550;
	line-height: 44px;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	border-top: 1px solid #90816a;
	cursor: pointer;
	-webkit-box-align:center;
	-ms-flex-align:center;
	align-items:center;
	-webkit-box-pack:justify;
	-ms-flex-pack:justify;
	justify-content:space-between;
	-webkit-transition: all 0.5s;
	-o-transition: all 0.5s;
	transition: all 0.5s
}
#ul li:hover{
	background: #b9a17a;
	color: #4c371a;
}
#ul li:hover span{
	visibility: visible;
}
#ul li p{
	width: 3em;
	height: 44px;
	text-align: justify;	
	}
#ul li p i{
	width: 100%;
	display:inline-block;
}
#ul li span{
	display: block;
	height: 20px;
	width: 20px;
	background: url(../img/index.png) no-repeat -147px -29px;
	margin-right: 10px;
	visibility: hidden;
	-webkit-transition: visible 0.5s;
	-o-transition: visible 0.5s;
	transition: visible 0.5s
}
#ul li .spanShow{
	visibility: visible;
}

</style>

